<template>
  <div>
    <div class="page" v-if="list.length > 0">
      <section v-for="(item,index) in list" :key="index" v-if="item.choose">
        <div class="bak-list flex-row">
          <div class="block-chance">
            <block type="probability" :data="{id:item.chongShouBao.id, name: item.chongShouBao.name, probability: item.probability}" :item="item"></block>
          </div>
          <div class="list-center">
            <div class="block-title">{{item.collegeName}}</div>
            <ul class="ellall">
              <li>招生专业：<span class="c-blue">{{item.collegeTypeName}}</span></li>
              <li>{{item.year}}：计划招生<span class="c-blue">{{item.studentPlan||'-'}}</span>人</li>
              <li>{{item.year - 1}}：最低录取分数<span class="c-blue">{{item.minScore||0}}</span>最低位次<span class="c-blue">{{item.minRank||0}}</span></li>
            </ul>
          </div>
          <div class="list-right" @click="deleteSchool(item,index);">×</div>
        </div>

        <div class="footer">
          <div class="footer-title"><span class="c-blue">{{item.maJorCnt || 0}} </span>个备选专业</div>
          <ul v-if="item.maJorCnt > 0">
            <li v-for="(major,i) in item.enrollStudentPlans" :key="i" v-if="!major.choose">
              <div @click="deleteMajor(major,item.enrollStudentPlans,i,index);item.maJorCnt = item.maJorCnt - 1">
                <!-- <span :class="'c-'+major.chongShouBao.id"> -->
                <!-- <span>
                  {{major.chongShouBao.name}}{{major.chongShouBao.id!==4?major.probability+'%':major.probability}}
                </span> -->
                <p class="ell">{{major.name}}</p>
              </div>
            </li>
          </ul>
        </div>
      </section>
      <paginate v-if="totalElements>15" :total="totalElements" :pagegroup="3" :current-page="page" @pagechange="pagechange" :display="params.size"></paginate>
    </div>
    <no-content v-else :text="text"></no-content>
  </div>
</template>

<script>
import { api } from '@/utils'
export default {
  data () {
    return {
      text: '正在加载...',
      list: [],
      schoolSum: 0,
      params: {
        size: 15,
        page: 0
      },
      totalElements: 0,
      page: 1
    }
  },
  created () {
    this.schoolSum = this.$store.state.schoolSum
  },
  methods: {
    getAlternative () {
      this.params._ = (new Date()).getTime() // IE下会缓存，加个时间戳禁止缓存
      this.$axios.get(api.queryFirstChooseCollege, { params: this.params }).then(data => {
        console.log(12333, data)
        if (data !== '') {
          if (data.content.length) {
            data.content.forEach(item => {
              item.active = false
              if (!item.chongShouBao) {
                item.chongShouBao = {
                  id: 4,
                  name: '数据缺失'
                }
              }
              // if (!item.probability) {
              //   item.probability = 0
              // }
              if (!this.type) {
                if (item.firstCollegeListBeans) {
                  item.firstCollegeListBeans.forEach(item => {
                    if (!item.chongShouBao) {
                      item.chongShouBao = {
                        id: 4,
                        name: '数据缺失'
                      }
                    }
                    // if (!item.probability) {
                    //   item.probability = 0
                    // }
                  })
                }
              }
            })
            this.list = data.content
            console.log('查询备选库大学列表', this.list)
            this.totalPages = data.totalPages
            this.totalElements = data.totalElements
            // 如果是初次进来，就存住大学原始数量
            // if (type === 'init') {
            //   this.schoolNum = data.totalElements
            // }
            // 加载状态结束
            this.loading = false
            if (this.list.length >= this.totalElements) {
              this.finished = true
              this.text = '已加载全部数据'
            } else {
              this.text = ''
              this.finished = false
            }
          } else {
            this.text = '暂无数据'
            this.list = []
            this.totalPages = 0
            this.totalElements = 0
          }
        } else {
          this.text = '暂无数据'
          this.list = []
          this.totalPages = 0
          this.totalElements = 0
          this.schoolNum = 0
        }
        console.log(this.list)
      }).catch(err => {
        console.log(err)
        this.text = '网络走丢了，请稍后重试！'
      })
    },
    deleteSchool (item, index) {
      let _sum = this.$store.state.schoolSum - 1
      this.$store.commit('setSchoolSum', _sum)

      this.list.splice(index, 1)
      if (this.list.length === 0) this.text = '暂无数据'

      this.$axios.post(api.delFirstCollege, {id: item.id}).then(data => {
        this.$message.success('成功删除学校')
      }).catch(data => {
        this.$message.error('网络走丢了，请稍后重试！')
        this.getAlternative()
      })
    },
    deleteMajor (major, item, i, index) {
      item.splice(i, 1)
      this.$set(this.list[index], 'enrollStudentPlans', item)
      let _params = {
        collegeId: major.college.id,
        studentPlansId: major.id
      }
      this.$axios.post(api.setFirstCollegeMajor, _params).then(data => {
        this.$message.success('成功删除专业')
      }).catch(data => {
        this.$message.error('网络走丢了，请稍后重试！')
        this.getAlternative()
      })
    },
    pagechange (currentPage) {
      this.page = currentPage
      this.params.page = currentPage - 1
      this.getAlternative()
    }
  },
  watch: {
    tabsData (val) {
      this.$nextTick(function () {

      })
    }
  }
}
</script>

<style scoped lang="scss">

  section{
    width:100%;
    padding:20px 0 10px;
    border-bottom:1px solid $line;
    .block-chance{
      width:80px;
    }
    .bak-list{
      padding-bottom:10px;
      .list-center{
        flex:1;
        overflow: hidden;
        // width:100%;
        padding-left:10px;
        ul{
          margin-top:5px;
          font-size:13px; height:1.4;
          color: $stable-ad;
        }
      }
      .list-right{
        font-size:40px;
        width:50px;
        text-align:center;
        color:#d6d6d6;
        margin-top:-10px;
        cursor:pointer;
        &:hover{
          color:$assertive;
        }
      }
    }

    .footer{
      border:1px solid $line;
      .footer-title{
        background:$gray-bg;
        height:22px; line-height:20px;
        font-size:14px;
        padding-left:10px;
        color:#69707F;
      }
      ul{
        border-top:1px solid $line;
        display:flex;
        flex-wrap:wrap;
        padding:4px 5px;
        li{
          width:50%;
          padding:4px 5px;
          >div{
            position:relative;
            cursor:pointer;
            height:22px; line-height:20px;
            border:1px solid $line;
            display:flex;
            padding-right:20px;
            padding-left:10px;
            color:$stable-ad;
            &:hover{
              border:1px solid $assertive;
              color:$assertive;
            }
            span{
              padding-left:5px;
              color:$assertive;
              font-size:10px;
              min-width:50px;
            }
            p{
              color:#69707F;
              font-size:14px;
            }
            &:after{
              position:absolute; top:0px; right:0px;
              width:20px; text-align:center;
              content:"×";
              display:block;
            }
          }
        }
      }
    }
  }
  /deep/ .pagination {
    margin-top: 20px;
    li {
      margin-right: 0;
      > a {
        padding: 0 3px;
      }
    }
  }
</style>
